<template>
    <view class="order-item">
        <view class="item-head">
            <view class="date">
                {{ data.SortingDateTime }}
            </view>
            <view class="state">
                {{ data.SortingStateName }}
            </view>
        </view>
        <view class="order-item-main" @click="goOrderDetail(data.ID)">
            <view class="info-list">
                <view class="info-item">
                    <view class="name">提货单数：</view>
                    <view class="val">应送{{ data.OrderCount }}件</view>
                </view>
                <view class="info-item">
                    <view class="name">订单金额：</view>
                    <view class="val">¥{{ data.OrderPrice }}</view>
                </view>
                <view class="info-item">
                    <view class="name">总佣金：</view>
                    <view class="val">¥{{ data.Commission }}</view>
                </view>
                <view class="info-item">
                    <view class="name">分拣单号：</view>
                    <view class="val">{{ data.SortingNo }}</view>
                </view>
            </view>
        </view>
        <view class="order-no" @click="goOrderDetail(data.ID)">
            <view class="info"
                ><iconsfont
                    v-if="data.Source == 1"
                    customIcons="icon-bu"
                    size="24"
                    style="padding-right: 10rpx; color: #eb1010"></iconsfont
                >分拣单号：<text class="no">{{ data.SortingNo }}</text></view
            >
            <uni-icons type="arrowright"></uni-icons>
        </view>
        <view class="order-item-bottom">
            <view class="order-state-menu">
                <text class="btn btn-gray" v-if="states.includes(data.SortingState)" @click="goLogistics(data.ID)"
                    >物流信息</text
                >
                <text class="btn btn-danger" v-if="data.SortingState == 3" @click="sortingSignFor(data.ID)"
                    >核对商品数量</text
                >
                <text class="btn btn-gray btn-success" v-if="data.SortingState == 2" @click="confirmReceipt()"
                    >确认收货</text
                >
                <text class="btn btn-gray btn-success" @click="goRelevance(data.ID)">关联订单</text>
            </view>
        </view>
        <uni-popup ref="popTip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="确认收货?"
                :before-close="true"
                @close="cancelIt"
                @confirm="doIt"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import { sortingReceipt } from "@/service/api/communtiyGroup.js"
export default {
    props: {
        data: {
            type: Object,
            default: {},
        },
        title: {
            type: String,
            default: "订单详情",
        },
    },
    data() {
        return {
            states: [2, 3, 6, 7], // 判断哪些状态有物流信息
        }
    },
    methods: {
        ...mapMutations(["UP_ORDER_VIEW"]),
        goOrderDetail(id) {
            this.easyGoTo("/pages_group/packet/order/receipt/order-detail?id=" + id + "&title=" + this.title)
        },
        goRelevance(id) {
            this.easyGoTo("/pages_group/packet/order/relevance/index?id=" + id)
        },
        goLogistics(id) {
            this.easyGoTo("/pages_group/packet/order/logistics?id=" + id)
        },
        sortingSignFor(id) {
            this.easyGoTo("/pages_group/packet/order/receipt/order-detail?id=" + id)
        },
        confirmReceipt() {
            this.$refs.popTip.open()
        },
        cancelIt() {
            this.$refs.popTip.close()
        },
        doIt() {
            let param = {
                id: this.data.ID,
            }
            sortingReceipt(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("收货成功")
                    this.cancelIt()
                    setTimeout((e) => {
                        this.upOrderView()
                    }, 800)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //更新订单列表
        upOrderView() {
            this.UP_ORDER_VIEW(new Date().getTime())
        },
    },
}
</script>

<style lang="scss">
// @import "style/orderItem.scss";

.order-item {
    background: $color-white;
    border-radius: 10rpx;
    position: relative;
    margin: 20rpx $app-page-padding;
}
.item-head {
    display: flex;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 24rpx;
    justify-content: space-between;
    border-bottom: #ebebeb solid 1px;
    .date {
        font-size: 30rpx;
        font-weight: bold;
    }
    .state {
        font-size: 24rpx;
    }
}
.order-item-main {
    padding: $app-page-padding $app-page-padding 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    .info-list {
        .info-item {
            display: flex;
            padding: 0 0 20rpx 0;
            .name {
                width: 140rpx;
                font-size: 28rpx;
                color: $color-gray-3;
            }
            .val {
                font-size: 28rpx;
            }
        }
    }
}
.order-no {
    display: flex;
    padding: $app-page-padding;
    font-size: 28rpx;
    border-top: #ebebeb solid 1px;
    align-items: center;
    .info {
        flex: 1;
        .no {
            color: #007aff;
        }
    }
}
.order-state-menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    .btn {
        margin-left: $app-page-padding;
    }
}
.order-item-bottom {
    padding: 12rpx $app-page-padding $app-page-padding $app-page-padding;
}

.right {
    .right-box {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        .right-box-text {
            color: $color-gray-1;
            font-size: $font-size-24;
            padding-right: 24rpx;
            font-family:
                PingFangSC-Medium,
                PingFang SC;
            font-weight: 500;
            letter-spacing: 2rpx;
        }
    }
    .order-desc {
        color: $app-color-text-tip;
    }
}
.pro-text {
    font-size: $font-size-28;
    font-weight: 600;
}
.text-num {
    display: flex;
    line-height: 40rpx;
    text {
        display: block;
        color: #fff;
    }
    .amountnum {
        height: 40rpx;
        line-height: 40rpx;
        color: #fff;
        max-width: 80rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
.flex-start-img {
    width: 36rpx;
    height: 40rpx;
}
</style>
